<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax接口调用练习</title>
  <script src="/js/jquery-2.1.1.min.js" ></script>
</head>
<body>

<div id="nameBox"></div>
<button onclick="getString()">获取字符串</button>

<div id="jsonBox">
</div>
<button onclick="getJson()">获取json</button>

<script>
    function getString() {
        // 进行接口调用
        $.ajax({
            url: "/ai/getString",
            // get、post
            type:"GET",
            data:{
                "name":"天亮教育"
            },
            // 请求成功之后会执行的方法
            // 这个方法的参数就还是请求成功的返回值
            success(res) {
                document.getElementById("nameBox").innerText = res;
            }
        })
    }

    function getJson() {
        $.ajax({
            url:"/ai/getMap",
            success(res) {
                console.log(res.name)
                console.log(res.student)
                var jsonBox = document.getElementById("jsonBox");
                jsonBox.innerHTML = `
                    <div>名字：${res.name}</div>
                    <div>学生姓名:${res.student.name}</div>
                `
            }
        })
    }

</script>
</body>
</html>